<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"></script>
<style>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #mapContainer {
        width: 100%;
        height: 92%;
    }

    .adres {
        width: 9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .top-lx {
        position: fixed;
        bottom: 0;
        /* margin: 0.3rem; */
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 8%;
        background: #fff;
        font-weight: 600;
        font-family: "宋体";
        padding: 0.6rem 0;
        box-sizing: border-box;
        justify-content: space-around;
        width: 100%;
    }

    .addressdata {
        color: #000;
        box-sizing: border-box;
        margin-right: 1rem;
        border-right: 2px solid #aaa;
        height: 65%;
        padding-right: 1rem;
        font-size: 1rem;
        padding-left: 0.5rem;
    }

    .timedata {
        color: #000;
        height: 68%;
        font-size: 1rem;
    }

    .dao {
        position: fixed;
        bottom: 15%;
        left: 35%;
        background: #3777FF;
        border: none;
        padding: 0.3rem 1rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        color: #fff;
    }

    .daohang {
        width: 8%;
    }
</style>

<body onload="">
<div id="mapContainer"></div>
<!-- <div>

</div> -->
<div class="top-lx">
    <div style="width: 80%;display: flex;">
        <div class="addressdata">
            <span id="distance"></span>
        </div>
        <div class="timedata">
            <span id="duration"></span>
        </div>
    </div>
    <img class="daohang" onclick="daohang()"
         src="http://sucai.suoluomei.cn/sucai_zs/images/20200104171333-1173569cd5ffc726ca93e7230eb05ca.png" alt="">
</div>

<!-- <button class="dao">导航</button> -->
</body>

</html>
<script>
    // 获取链接后面的参数
    var latitudea = 0;
    var longitudea = 0;
    var latitude = 0;
    var longitude = 0;
    var lnglatXY = ""
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if (r != null) return unescape(r[2]); return null;
    }
    console.log("latitude", GetQueryString("latitude"))
    console.log("longitude", GetQueryString("longitude"))
    latitudea = GetQueryString("latitude")
    longitudea = GetQueryString("longitude")
    var map;
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: '<?php echo $signPackage["timestamp"];?>',
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'chooseImage',
            'uploadImage',
            'scanQRCode',
            'getLocation',
            'openLocation'
        ]
    });
    wx.ready(function () {
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                if (res.errMsg == "getLocation:ok") {
                    console.log('res', res)
                    longitude = res.longitude;
                    latitude = res.latitude;
                    lnglatXY = [res.longitude, res.latitude]; //已知点坐标
                    console.log("13123", lnglatXY[1]);
                    // initMap(lnglatXY);

                    //初始化地图
                    map = new TMap.Map('mapContainer', {
                        center: new TMap.LatLng(lnglatXY[1], lnglatXY[0]),//地图显示中心点
                        zoom: 11
                    });

                    //WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
                    var url = "https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
                    url += "?from=" + lnglatXY[1] + "," + lnglatXY[0];  //起点坐标
                    url += "&to=" + latitudea + "," + longitudea;  //终点坐标
                    url += "&output=jsonp&callback=cb";	//指定JSONP回调函数名，本例为cb
                    url += "&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"; //开发key，可在控制台自助创建
                    //发起JSONP请求，获取路线规划结果
                    jsonp_request(url);
                    cb(ret)
                    display_polyline(pl)
                }

            }
        })
    })
    //浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
    function jsonp_request(url) {
        var script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);
    }
    //定义请求回调函数，在此拿到计算得到的路线，并进行绘制
    function cb(ret) {
        var coors = ret.result.routes[0].polyline, pl = [];
        //获取路线距离
        var distance = ret.result.routes[0].distance
        var duration = ret.result.routes[0].duration
        distance = distance / 1000
        $("#distance").text("距离:" + distance.toFixed(2) + "公里")
        $("#duration").text("时长:" + duration + "分钟")

        console.log(ret)
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
            pl.push(new TMap.LatLng(coors[i], coors[i + 1]));
        }

        display_polyline(pl)//显示路线

        //标记起终点marker
        var marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map,
            styles: {
                "start": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://sucai.suoluomei.cn/sucai_zs/images/20191211151137-marker.png'



                }),
                "end": new TMap.MarkerStyle({
                    "width": 35,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'http://sucai.suoluomei.cn/sucai_zs/images/20200104135819-moeaddress.png'

                })
            },
            geometries: [{
                "id": 'start',
                "styleId": 'start',
                "position": new TMap.LatLng(latitudea, longitudea),//接口渲染数据
                "title": "<div class='adres'><img style='width:100%;' src='" + image + "'></div><p style='margin:0;'>目的地</p>"
            }, {
                "id": 'end',
                "styleId": 'end',
                "position": new TMap.LatLng(lnglatXY[1], lnglatXY[0]),//接口渲染数据
                "title": "我的位置"
            }]
        });
        //初始化infoWindow
        var infoWindow = new TMap.InfoWindow({
            map: map,
            position: new TMap.LatLng(39.984104, 116.307503),
            offset: { x: 0, y: -34 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
        });
        infoWindow.close();//初始关闭信息窗关闭
        //marker点击事件
        marker.on("click", function (evt) {
            //设置infoWindow
            console.log("点击了坐标")
            infoWindow.open(); //打开信息窗
            infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
            infoWindow.setContent(evt.geometry.title);//设置信息窗内容
            // infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容

        })

    }
    function daohang() {
        // window.location.href="https://mapdownload.map.qq.com/index?channel=10029633&key=personal&referer=myapp"latitude longitude

        window.location.href = "https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=" + latitude + "," + longitude + "&to=目的地&tocoord=" + latitudea + "," + longitudea + "&policy=1&referer=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"
    }
    function display_polyline(pl) {
        //创建 MultiPolyline显示折线
        var polylineLayer = new TMap.MultiPolyline({
            id: 'polyline-layer', //图层唯一标识
            map: map,//绘制到目标地图
            //折线样式定义
            styles: {
                'style_blue': new TMap.PolylineStyle({
                    'color': '#3777FF', //线填充色
                    'width': 6, //折线宽度
                    'borderWidth': 5, //边线宽度
                    'borderColor': '#FFF', //边线颜色
                    'lineCap': 'round' //线端头方式
                })
            },
            //折线数据定义
            geometries: [
                {
                    'id': 'pl_1',//折线唯一标识，删除时使用
                    'styleId': 'style_blue',//绑定样式名
                    'paths': pl
                }
            ]
        });
    }

</script>

